<template>
  <div class="home-banner">
    <div class="background"></div>
    <div class="banner-container">
      <van-swipe
        class="my-swipe"
        lazy-render
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item v-for="item in bannerList" :key="item.id">
          <img :src="item.img" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script setup lang="ts">
import { readonly, ref, onMounted } from "vue";
import { getBannerListApi } from "@/api/banner";
// import type { IBannerItem } from "../../../@types/banner";

const bannerList = ref<BannerNS.IBannerItem[]>([]);
onMounted(() => {
  getBannerListApi().then((res) => {
    bannerList.value = res;
  });
});
</script>

<style scoped lang="scss">
.home-banner {
  height: 1.4rem;
  position: relative;
  overflow: hidden;
  .background {
    position: absolute;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background-color: red;
    left: 50%;
    top: -300%;
    transform: translate(-50%, -50%);
  }
  .banner-container {
    width: 3.5rem;
    height: 100%;
    position: absolute;
    margin: 0 auto;
    background-color: blueviolet;
    left: 0;
    right: 0;
    border-radius: 10px;
    overflow: hidden;
    .my-swipe {
      height: 100%;
      .van-swipe-item {
        color: #fff;
        font-size: 20px;
        height: 100%;
        text-align: center;
        background-color: #39a9ed;
      }
      img {
        width: 100%;
      }
    }
  }
}
</style>
../../../@types/banner
